import { Link } from "react-router-dom";
import { Route, Routes, Navigate } from "react-router";
import { BillboardScreen } from "../billboard";
import { EpicScreen } from "../epic";
import { Menu } from "antd";
import styled from "@emotion/styled";
import { useRouteType } from "./utils";

const Container = styled.div`
  display: flex;
  overflow: hidden;
  width: 100%;
`;
const Aside = styled.aside`
  display: flex;
  min-width: 16rem;
`;
const Content = styled.main`
  flex: 1;
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
`;

const ProjectScreen = () => {
  const selectedKey = useRouteType();
  return (
    <Container>
      <Aside>
        <Menu mode="inline" selectedKeys={[selectedKey]}>
          <Menu.Item key="billboard">
            <Link to="billboard">看板</Link>
          </Menu.Item>
          <Menu.Item key="epic">
            <Link to="epic">任务组</Link>
          </Menu.Item>
        </Menu>
      </Aside>
      <Content>
        <Routes>
          <Route path="/billboard" element={<BillboardScreen />} />
          <Route path="/epic" element={<EpicScreen />} />
          <Route
            path="/"
            element={<Navigate to="billboard" replace={true} />}
          />
        </Routes>
      </Content>
    </Container>
  );
};

export default ProjectScreen;
